<template>
  <div id="orderStepView">
    <div class="title">维修跟踪</div>
    <div class="stepList">
        <!--<StepView showUpLoadImg="true" isActive="true" ></StepView>-->
        <!--<StepView title="王师傅 13235209726 已接单" subTitle="2019-09-16 18:23"></StepView>-->
        <!--<StepView isHiddenDownLine="true" title="派单中" subTitle="2019-09-16 18:23"></StepView>-->

        <StepView v-for="(timeLine , i) in orderDetail.timelines" :title="timeLine.timeline" :subTitle="timeLine.createAt" :isActive="isActive(i)" :isHiddenDownLine="isHiddenDownLine(i)" :imgStr="timeLine.imgUrls"></StepView>

    </div>
  </div>
</template>

<script>
import StepView from "./StepView";

export default {
  name: "OrderStepView",
  components: {
    StepView
  },
    props:{
        orderDetail:Object
    },
    methods:{
      // 是否激活样式的时间线
        isActive(index){

            if (this.orderDetail.timelines.length == 1){
                return true;
            }


            if (index == 0 && (this.orderDetail.timelines.length > 1)) {
                return true;
            }else {
                return false;
            }

        },

        // 非激活样式中 是否为第一个 时间线

        isHiddenDownLine(index){

            if (this.orderDetail.timelines.length == 1){
                return false;
            }

            if (index == (this.orderDetail.timelines.length - 1)) {
                return true;
            }else {
                return false;
            }

        }
    }
};
</script>

<style scoped>
#orderStepView {
  background-color: white;
    margin-bottom: 5rem;
}
.title {
  padding-top: 1.3333333333333333rem;
  margin-left: 1.3333333333333333rem;
  font-size: 1rem;
  font-family: PingFangSC-Medium, PingFangSC;
  font-weight: 500;
  color: rgba(18, 28, 50, 1);
  line-height: 1.4rem;
}

.stepList {
}
</style>
